<main class="container text-center form-signin" style='max-width:400px'>
    <br><br><br><br>
    <h1 class='display-2'><i class="bi bi-person-square"></i></h1>
    <h1>User_Reg_Title</h1>
    <form action="./Core/User/RegUser_Axaj.php" method="post" class="needs-validation bg-light" target="form-submit" novalidate>
        <div class='form-floating '>
                    <input type='text' maxlength="32" class='form-control opacity-75' name='Reg_UserID' id='userid' placeholder="User_Reg_Text_userID_Tips" required>
                    <label for='reg_userid'>User_Reg_text_userID</label>
                    <div class="invalid-feedback">User_Reg_Text_userID_Tips</div>
                </div><br>
                <div class='form-floating'>
                    <input type='password' maxlength="32" class='form-control opacity-75' name='Reg_Password' id='userpassword' placeholder="User_Reg_Text_userPasword_Tips" required>
                    <label for='reg_password'>User_Reg_text_userPasword</label>
                    <div class="invalid-feedback">User_Reg_Text_userPasword_Tips</div>
                </div><br>
                <div class='form-floating'>
                    <input type='password' maxlength="32" class='form-control opacity-75' name='Reg_Password_Again' id='userpasswords' placeholder="User_Reg_TExt_userPasword_true_Tips" required>
                    <label for='reg_password'>User_Reg_TExt_userPasword_true</label>
                    <div class="invalid-feedback">User_Reg_TEXt_userPasword_true_Tips</div>
                </div><br>
                <div>
                    <div class='form-floating' style="width:45%;float:left">
                        <input type='text' maxlength="6" class='form-control opacity-75' autocomplete="off" name='code' id='code' placeholder="User_Reg_Text_userCode_tips" required>
                        <label for='code'>User_Reg_text_userCode</label>
                    </div>
                    
                    <div id='usercode' style='width:50%;float:right;background-color:rgb(212 223 232 / 41%);height:calc(3.5rem + 2px)' class="rounded-3" onclick="API_USE_reload_htmlcode('usercode')"></div>
                </div>
                <br><br><br>
                <input type='submit'  class='btn btn-dark w-100 btn-lg ' value='User_Reg_text_UserButtom'>
    </form>
</main>
<script id='API_USE_htmlcode' src="./Core/Other/API_Axaj.php?type=HtmlCode"></script>
<script>
    API_USE_load_htmlcode("usercode")
    function load_user(){
        if(API_USE_check_htmlcode("code","value") == false){
            
            API_USE_reload_htmlcode('usercode')
            return false;
        }
        return true;
    }
    
    (function () {
      'use strict'

      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.querySelectorAll('.needs-validation')

      // Loop over them and prevent submission
      Array.prototype.slice.call(forms)
      .forEach(function (form) {
        form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }else if(API_USE_check_htmlcode("code","value") == false){
            API_USE_reload_htmlcode('usercode')
            event.preventDefault()
            event.stopPropagation()
            document.getElementById("code").className ='form-control code_error';
            return false;
        }else if(document.getElementById('userpassword').value != document.getElementById('userpasswords').value){
            document.getElementById("userpasswords").className ='form-control code_error';
            event.preventDefault()
            event.stopPropagation()
            return false;
        }else{
            document.getElementById("code").className ='form-control';
        }
        form.classList.add('was-validated')
        }, false)
      })
    })()
</script>